<template>
<div>
	<city-header></city-header>
	<city-search :cities="cities" @selectedCity='handleCity'></city-search>
	<city-list :cities='cities' 
				:hotCities='hotCities' 
				:letter='letter'
				:selectedCity='selectedCity'
				></city-list>
	<city-alphabet :cities='cities'
					@change='handleChange'
					
		></city-alphabet>
</div>

</template>

<script>
	import CityHeader from './components/Header'
	import CitySearch from './components/Search'
	import CityList from './components/List'
	import CityAlphabet from './components/Alphabet'
	
	import axios from 'axios'
	export default {
		name:'City',
		components:{
			CityHeader,
			CitySearch,
			CityList,
			CityAlphabet
		},
		data(){
			return {
				cities:{},
				hotCities:[],
				letter:'',
				selectedCity:''
			}
		},
		methods:{
			getCityInfo(){
				axios.get('/api/city.json')
					.then(this.handleGetCityInfoSuccess)
			},
			handleGetCityInfoSuccess(data){
				console.log(data)
				const response = data.data
				if(response.ret && response.data){
					const data = response.data
					this.hotCities = data.hotCities
					this.cities = data.cities
					console.log("hotCities" + this.hotCities)
				}
			},
			handleChange(letter){
				this.letter = letter
			},
			handleCity(sel){
				this.selectedCity = sel;
			}
		},
		mounted(){
			this.getCityInfo();
		}
	}
</script>

<style lang="stylus" scoped>
</style>